<template>
  <view class="sidebar" :class="{'show': show}">
    <!-- 背景装饰元素 -->
    <view class="decor-circle circle-1"></view>
    <view class="decor-circle circle-2"></view>
    
    <!-- 侧边栏头部 -->
    <view class="sidebar-header">
      <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
      <text class="sidebar-title">大辛辅导班</text>
      <text class="sidebar-subtitle">快乐学习每一天</text>
    </view>
    
    <!-- 菜单列表 -->
    <view class="menu-list">
      <view 
        v-for="item in menuItems" 
        :key="item.id"
        class="menu-item"
        :class="{'active': active === item.id}"
        @click="handleMenuClick(item.id)"
      >
        <view class="menu-icon-container">
          <uni-icons 
            :type="item.icon" 
            size="24" 
            :color="active === item.id ? '#fff' : '#a0d8f8'"
          ></uni-icons>
        </view>
        <text class="menu-text">{{item.title}}</text>
        <view class="menu-indicator" v-if="active === item.id"></view>
      </view>
    </view>
    
    <!-- 底部装饰 -->
    <view class="sidebar-footer">
      <image class="decor-image" src="/static/sidebar-decor.png" mode="aspectFit"></image>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    show: Boolean,
    active: String
  },
  data() {
    return {
      menuItems: [
        { id: 'home', title: '首页', icon: 'home' },
        { id: 'student', title: '学生功能', icon: 'person' },
        { id: 'tools', title: '工具游戏', icon: 'star-filled' },
        { id: 'news', title: '咨讯新闻', icon: 'notification' },
        { id: 'clock', title: '时钟', icon: 'spinner-cycle' }
      ]
    }
  },
  methods: {
    handleMenuClick(menuId) {
      this.$emit('change', menuId)
    }
  }
}
</script>

<style lang="scss" scoped>
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 20%;
  background: linear-gradient(145deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  transform: translateX(-100%);
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  z-index: 1000;
  box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border-top-right-radius: 20rpx;  
    border-bottom-right-radius: 20rpx;  
	border-radius: 20rpx;
  &.show {
    transform: translateX(0);
  }
  
  /* 装饰圆圈 */
  .decor-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 8s infinite ease-in-out;
    
    &.circle-1 {
      width: 200rpx;
      height: 200rpx;
      top: -50rpx;
      right: -50rpx;
      animation-delay: 0s;
    }
    
    &.circle-2 {
      width: 150rpx;
      height: 150rpx;
      bottom: 100rpx;
      left: -50rpx;
      animation-delay: 2s;
    }
  }
  
  /* 侧边栏头部 */
  .sidebar-header {
    padding: 40rpx 30rpx;
    position: relative;
    z-index: 2;
    
    .logo {
      width: 80rpx;
      height: 80rpx;
      margin-bottom: 20rpx;
      filter: drop-shadow(0 5rpx 10rpx rgba(0, 0, 0, 0.2));
	  border-radius: 50%;
    }
    
    .sidebar-title {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
    }
    
    .sidebar-subtitle {
      display: block;
      font-size: 24rpx;
      opacity: 0.8;
    }
  }
  
  /* 菜单列表 */
  .menu-list {
    padding: 20rpx 0;
    position: relative;
    z-index: 2;
    
    .menu-item {
      display: flex;
      align-items: center;
      padding: 25rpx 30rpx;
      margin: 0 10rpx;
      border-radius: 12rpx;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background: rgba(255, 255, 255, 0.15);
        transition: width 0.3s ease;
      }
      
      &:hover::before {
        width: 100%;
      }
      
      &.active {
        background: rgba(255, 255, 255, 0.2);
        transform: translateX(10rpx);
        
        .menu-text {
          font-weight: bold;
        }
      }
      
      .menu-icon-container {
        width: 50rpx;
        height: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
        transition: all 0.3s ease;
      }
      
      .menu-text {
        font-size: 28rpx;
        transition: all 0.3s ease;
      }
      
      .menu-indicator {
        position: absolute;
        right: 30rpx;
        width: 8rpx;
        height: 40rpx;
        background: white;
        border-radius: 4rpx;
        animation: pulse 1.5s infinite;
      }
    }
  }
  
  /* 侧边栏底部 */
  .sidebar-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    overflow: hidden;
    
    .decor-image {
      width: 100%;
      height: 100%;
      opacity: 0.6;
    }
  }
}

/* 动画 */
@keyframes float {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-20rpx) translateX(20rpx);
  }
}

@keyframes pulse {
  0% {
    opacity: 0.5;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}
</style>